<template>
  <!--订阅番剧-->
  <div style="overflow:hidden">
    <div class="large-item" :class="large?'large-item-first':'large-item-second'" v-for="item in fanList" :key="item">
      <div class="b-img-inner common-cursor">
        <img :src="require('/src/assets/img/p20240203152955.png')" alt=""/>
        <span class="badge" :class="item.badgeBg==''?'':(item.badgeBg=='blue'?'blue':(item.badgeBg=='pink'?'pink':''))" v-if="item.badgeText!=''">
          {{item.badgeText==undefined || item.badgeText==null ? '':item.badgeText}}
        </span>
      </div>
      <div class="detail">
        <a href="" target="_blank" title="剑网3·侠肝义胆沈剑心 第三季" class="detail-title">
          <span class="icon-over" v-show="!fan">完</span>
          剑网3·侠肝义胆沈剑心 第三季剑网3·侠肝义胆沈剑心 第三季剑网3·侠肝义胆沈剑心 第三季
        </a>
        <p style="font-size: 12px;" title="【下卷第14-16集大会员抢先" class="desc desc-common">
          【下卷第14-16集大会员抢先，第17集起大会员专享】江湖早已不再平静，沈剑心被包装成“江湖顶流”，清水岛众人离奇失踪，湖连网的幕后主使阿萨辛到底想做些什么？整个长安又会发生怎样的变化？...
        </p>
        <div v-if="fan">
          <div class="desc-bottom">
            {{ item.area }}
          </div>
          <div class="desc-bottom">
            {{ (item.rate==0||item.rate==null?'尚未观看':(item.rate==item.episodes?'已看完':'看到第'+item.rate+'话'))}} | {{'全'+item.episodes+'话'}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  /**番剧组件**/
  name: "pgcFollow",
  props:{
    fanList:{
      type: Array,
      default: ()=>[]
    },
    fan:{
      type: Boolean,
      default: false
    },
    large:{
      type: Boolean,
      default: true
    },
  },
  data(){
    return{}
  },
  methods:{}

}
</script>

<style scoped>
.common-cursor{
  cursor: pointer;
}
.large-item{
  width: 413px;height: 144px;float: left;display: block
}
.large-item-first{
  margin: 0 20px 30px 0;
}
.large-item-second{
  margin: 0 0 30px 0;
}
.b-img-inner{
  position: relative;
  float:left;border-radius: 4px;width: 110px;height: 144px;overflow: hidden;
}
.b-img-inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.detail{
  height: 144px;margin: 0 0 0 130px;padding-right: 20px;
}
.detail .detail-title{
  font-size: 18px;
  margin: 0 0 10px 0;
  display: block;color: #222222;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.icon-over{
  font-size: 12px;background-color: rgb(112,208,100);border-radius: 4px;vertical-align: middle;
  padding: 3px;color: white;margin-right: 5px;
}
.desc {
  height: 52px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 3;
  margin-bottom: 10px;
}
.desc-bottom{
  font-size: 12px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.badge {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 4px 0 4px;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  color: #fff;
  z-index: 2;
}

.pink{
  background-color: rgb(251, 114, 153);
}
.blue{
  background-color: rgb(0, 192, 255);
}
</style>
